<template>
	<van-nav-bar title="购物车">
		<template #right>
			<van-icon name="search" size="30" @click="search" />
			<van-icon name="edit" size="30" style="margin-left: 15px;" @click="editCart" v-if="editCartShow" />
			<van-icon name="records" color="red" size="50" style="margin-left: 15px;" @click="closeEdit"
				v-if="editCartClose" />
		</template>
	</van-nav-bar>
	<van-action-sheet v-model:show="show" title="搜索购物车商品">
		<div class="content">
			<div class="sea">
				<input type="text" placeholder="请输入搜索关键词">
				<button>搜索</button>
			</div>

		</div>
	</van-action-sheet>
	<div>
		<van-swipe-cell :before-close="beforeClose" v-for="item in cartList" :key="item.id">
			<van-card :num="item.num" :price="item.price" :title="item.name" :state="item.state" class="goods-card">
				<template #thumb>
					<div class="left-thumb">
						<van-checkbox v-model="item.state" @click="onSingleCheck(item.id, item.state)"></van-checkbox>
						<van-image :src="item.url" type="contain" width="70%" />
					</div>
				</template>
				<template #footer>
					<van-stepper v-model="item.num" theme="round" button-size="22" />
				</template>
			</van-card>

			<template #right>
				<van-button square text="删除" type="danger" class="delete-button" @click="onDelete(item.id)" />
			</template>
		</van-swipe-cell>


	</div>

	<van-submit-bar class="total-price" :price="showtotalPrice()" v-for="(item, index) in cartList" :key="index" button-text="结算"
		style="margin-bottom:50px" v-model:disabled="cartbutt" @submit="onSubmit">
		<van-checkbox v-model="checkAllState" @click="checkAll">全选</van-checkbox>
		<template #tip>
			你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
		</template>
	</van-submit-bar>



	<div id="edit" class="active" v-if="editShow">
		<van-submit-bar v-for="(item, index) in cartList" :key="index" button-text="删除" style="margin-bottom:50px;"
			@submit="onDelete(item.id)">
			<van-checkbox :v-model="checkAllState" @click="checkAll">全选</van-checkbox>
			<button @click="showShare = true">分享</button>
			<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
			<button @click="like">移入收藏</button>
		</van-submit-bar>
	</div>
</template>

<script setup lang="ts">
import { useCart } from '@/hooks/cart'
import { ref } from 'vue'
import router from '@/router/index';
import { Toast, Notify } from 'vant';

const {
	cartList,
	onSingleCheck,
	onDelete,
	beforeClose,
	checkAll,
	checkList,
	total,
	showtotalPrice,
	checkAllState,
	cartbutt
} = useCart()

const show = ref(false);
const showShare = ref(false);
const editShow = ref(false);
const editCartShow = ref(true)
const editCartClose = ref(false)
const likeshow = ref(false)





const onClickLink = () => Toast('修改地址');
const options = [
	[
		{ name: '微信', icon: 'wechat' },
		{ name: '朋友圈', icon: 'wechat-moments' },
		{ name: '微博', icon: 'weibo' },
		{ name: 'QQ', icon: 'qq' },
	],
	[
		{ name: '复制链接', icon: 'link' },
		{ name: '分享海报', icon: 'poster' },
		{ name: '二维码', icon: 'qrcode' },
		{ name: '小程序码', icon: 'weapp-qrcode' },
	],
];


//搜索商品
const search = () => {
	router.push({ path: "/search" })
}

//编辑购物车商品
const editCart = () => {
	editShow.value = true
	editCartShow.value = false
	editCartClose.value = true
}
const closeEdit = () => {
	editCartShow.value = true
	editCartClose.value = false
	editShow.value = false
}





//移入收藏
const like = () => {
	Notify({
		message: '收藏成功',
		color: '#ad0000',
		background: '#ffe1e1',
		duration: 1000,
	});
}

// 提交订单

const onSubmit = () => {
	router.push({ path: "/checkCart" })
	checkList()
}


</script>

<style lang="scss" scoped>
.goods-card {
	margin: 0;
	padding-bottom: 51px;
	background-color: white;
	// margin-bottom: 80px;
}

.delete-button {
	height: 100%;
}

.left-thumb {
	display: flex;
}

.notice-swipe {
	height: 40px;
	line-height: 40px;
}

.content {
	padding: 16px 16px 250px;
}

.sea {
	width: 320px;
	height: 45px;
	margin: auto;
	border: 1px solid red;
	border-radius: 20px;
	padding-top: 2px;

}

.sea input {
	width: 250px;
	height: 40px;
	border-radius: 20px;
	font-size: 15px;
	border: red;
	text-align: center;
}

.sea button {
	width: 63px;
	height: 43px;
	border-radius: 20px;
	font-size: 14px;
	background-color: rgb(254, 220, 49);
}

#edit button {
	width: 80px;
	height: 40px;
	border-radius: 20px;
	margin-right: 10px;
	border: 1px solid rgb(232, 148, 22);
	background-color: white;
	color: rgb(232, 148, 22);

}
</style>
